{% extends "shared/layout.volt" %}
{% block content %}
    <h1 class="page-header">编辑用户</h1>
    <div class="form-box" style="width: 850px;margin-top: 20px;">
        <form class="form-horizontal" method="post" enctype="multipart/form-data">
            <input type="hidden" name="merchant_id" value="{{ Model.member_id }}">
            {% if ErrorMessage is defined %}
                <p class="bg-danger" style="padding: 15px;">{{ ErrorMessage }}</p>
            {% endif %}
            {% if OkMessage is defined %}
                <p class="bg-success" style="padding: 15px;">{{ OkMessage }}</p>
            {% endif %}
            <div class="form-group">
                <label class="col-sm-3 control-label">用户账号</label>
                <div class="col-sm-9">
                    <p class="form-control-static">{{ Model.account }}</p>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">用户密码</label>
                <div class="col-sm-9">
                    <input type="password" name="password" placeholder="用户密码" value="" class="form-control input-sm">
                    <p class="sub-text">留空为不修改密码</p>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">用户头像</label>
                <div class="col-sm-9">
                    <div class="upload-select-picture-card">
                        <div class="upload-wrapper">
                            <div class="uploader-image-wrapper" id="uploadImageWrapper"{{ Model.avatar_url is not empty ? ' style="background:url('~ Model.avatar_url~')"' :'' }}>
                                <input type="file" accept="image/jpeg, image/jpg, image/png" id="btnUploader" name="avatar_url">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% if Model.member_id == Member.member_id %}
            <div class="form-group">
                <label class="col-sm-3 control-label" for="role_id">用户角色</label>
                <div class="col-sm-9">
                    <select class="form-control input-sm" name="role_id" id="role_id">
                    {% for item in RoleList %}
                        <option value="{{ item.role_id }}"{{ item.role_id == Model.role_id?' selected':'' }}>{{ item.role_name }}</option>
                    {% endfor %}
                    </select>
                </div>
            </div>
            {% endif %}
            <div class="form-group">
                <label class="col-sm-3 control-label">启用状态</label>
                <div class="col-sm-9">
                    <div class="radio_box">
                        <label for="merchant_status1" class="enable{{ Model.status == 'y' ? ' selected' : '' }}">启用</label>
                        <label for="merchant_status2" class="disable{{ Model.status == 'n' ? ' selected' : '' }}">禁用</label>
                        <input type="radio" value="y" name="merchant_status" id="merchant_status1"{{ Model.status == 'y' ? ' checked="checked"' : '' }}>
                        <input type="radio" value="n" name="merchant_status" id="merchant_status2"{{ Model.status == 'n' ? ' checked="checked"' : '' }}>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">真实姓名</label>
                <div class="col-sm-9">
                    <input type="text" name="realname" placeholder="真实姓名" value="{{ Model.realname }}" class="form-control input-sm">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">用户邮箱</label>
                <div class="col-sm-9">
                    <input type="text" name="email" value="{{ Model.email }}" class="form-control input-sm" placeholder="用户邮箱">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">手机号码</label>
                <div class="col-sm-9">
                    <input type="text" name="phone" value="{{ Model.phone }}" class="form-control input-sm" placeholder="手机号码">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">座机号码</label>
                <div class="col-sm-9">
                    <input type="text" name="telephone" value="{{ Model.telephone }}" class="form-control input-sm" placeholder="座机号码">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-8">
                    <button type="submit" class="btn btn-success" data-loading-text="保存中...">确定</button>
                    <button type="button" class="btn btn-default" onclick="window.location=window.document.referrer;">返回</button>
                </div>
            </div>
        </form>
    </div>
{% endblock %}
{% block footer %}
    <script type="text/javascript">
        $(function () {
            $("#btnUploader").on("change",function (e) {
                var file = this.files[0];
                var reader = new FileReader();
                // show表示<div id='show'></div>，用来展示图片预览的
                if(!/image\/\w+/.test(file.type)){
                    layer.msg("请确保文件为图像类型");
                    return false;
                }

                reader.onload = function(e){
                    var image = new Image();
                    image.src = URL.createObjectURL(file);
                    image.onload = function (ev) {
                        var canvas = document.createElement("canvas");
                        canvas.width = 87;
                        canvas.height = 87;
                        var ctx = canvas.getContext("2d");

                        ctx.drawImage(image, 0, 0, 87, 87);

                        var dataURL = canvas.toDataURL("image/jpeg");

                        $("#uploadImageWrapper").css('background-image','url('+ dataURL +')');
                    };
                };
                reader.readAsDataURL(file);
            }) ;
        });
    </script>
{% endblock %}
